<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="流转记录" name="record">
      <el-card class="box-card" shadow="never">
        <el-col :span="20" :offset="2">
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(item,index) in historyProcNodeList" :key="index" :icon="setIcon(item.endTime)" :color="setColor(item.endTime)">
                <p style="font-weight: 700">{{ item.activityName }}</p>
                <el-card v-if="item.activityType === 'startEvent'" class="box-card" shadow="hover">
                  {{ item.assigneeName }} 在 {{ item.createTime }} 发起流程
                </el-card>
                <el-card v-if="item.activityType === 'userTask'" class="box-card" shadow="hover">
                  <el-descriptions :column="5" :labelStyle="{'font-weight': 'bold'}">
                    <el-descriptions-item label="实际办理">{{ item.assigneeName || '-'}}</el-descriptions-item>
                    <el-descriptions-item label="候选办理">{{ item.candidate || '-'}}</el-descriptions-item>
                    <el-descriptions-item label="接收时间">{{ item.createTime || '-'}}</el-descriptions-item>
                    <el-descriptions-item label="办结时间">{{ item.endTime || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="耗时">{{ item.duration || '-'}}</el-descriptions-item>
                  </el-descriptions>
                  <div v-if="item.commentList && item.commentList.length > 0">
                    <div v-for="(comment, index) in item.commentList" :key="index">
                      <el-divider content-position="left">
                        <el-tag :type="approveTypeTag(comment.type)" size="mini">{{ commentType(comment.type) }}</el-tag>
                        <el-tag type="info" effect="plain" size="mini">{{ comment.time }}</el-tag>
                      </el-divider>
                      <span>{{ comment.fullMessage }}</span>
                    </div>
                  </div>
                </el-card>
                <el-card v-if="item.activityType === 'endEvent'" class="box-card" shadow="hover">
                  {{ item.createTime }} 结束流程
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="流程跟踪" name="track">
    <el-card class="box-card" shadow="never">
      <process-viewer :style="'height:' + height" :xml="xmlData"
                      :finishedInfo="finishedInfo" :allCommentList="historyProcNodeList"
      />
    </el-card>
  </el-tab-pane>
  </el-tabs>
</template>

<script>
import { detailProcess } from '@/api/workflow/process'
import { getTaskIdByProcessId, getTaskById } from '@/api/workflow/workflow'
import Parser from '@/utils/generator/parser'
import ProcessViewer from '@/components/ProcessViewer'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: "workflowRecord",
  components: {
    ProcessViewer,
    Parser
  },
  props: {
    businessId: {
      required: false
    },
    businessType: {
      required: false
    },
    processId: {
      required: false
    }
  },
  computed: {
    commentType() {
      return val => {
        switch (val) {
          case '1': return '通过'
          case '2': return '退回'
          case '3': return '驳回'
          case '4': return '委派'
          case '5': return '转办'
          case '6': return '终止'
          case '7': return '撤回'
        }
      }
    },
    approveTypeTag() {
      return val => {
        switch (val) {
          case '1': return 'success'
          case '2': return 'warning'
          case '3': return 'danger'
          case '4': return 'primary'
          case '5': return 'success'
          case '6': return 'danger'
          case '7': return 'info'
        }
      }
    }
  },
  data() {
    return {
      activeName: 'record',
      height: document.documentElement.clientHeight - 205 + 'px;',
      // 模型xml数据
      xmlData: undefined,
      finishedInfo: {
        finishedSequenceFlowSet: [],
        finishedTaskSet: [],
        unfinishedTaskSet: [],
        rejectedTaskSet: []
      },
      historyProcNodeList: [],
      taskForm:{
        comment:"", // 意见内容
        procInsId: "", // 流程实例编号
        deployId: "",  // 流程定义编号
        taskId: "" ,// 流程任务编号
        definitionId: "",  // 流程编号
        copyUserIds: "", // 抄送人Id
        vars: "",
        targetKey:""
      },
      currentUserId: null,
      variables: [], // 流程变量数据
      taskFormOpen: false,
      taskFormData: {}, // 流程变量数据
      processFormList: [], // 流程变量数据
      processVariables: {}, // 流程变量数据
    };
  },
  created() {
    if(this.processId){
      getTaskIdByProcessId({processId: this.processId}).then(res=>{
        this.taskForm.taskId = res.data;
        this.initData();
      })
    }else{
      getTaskById({id: this.businessId, category: this.businessType}).then(res=>{
        this.taskForm.taskId = res.data;
        this.initData();
      })
    }
  },
  methods: {
    initData() {
      if(!this.taskForm.taskId){
        this.taskForm.taskId = this.$route.params && this.$route.params.taskId;
      }
      // 流程任务重获取变量表单
      if (this.taskForm.taskId) {
        this.getProcessDetails(this.taskForm.taskId);
      }
    },
    setIcon(val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    },
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
    getProcessDetails(taskId) {
      const params = {taskId: taskId}
      detailProcess(params).then(res => {
        const data = res.data;
        this.xmlData = data.bpmnXml;
        this.processFormList = data.processFormList;
        this.processVariables = data.processVariables;
        this.taskFormOpen = data.existTaskForm;
        if (this.taskFormOpen) {
          this.taskFormData = data.taskFormData;
        }
        this.historyProcNodeList = data.historyProcNodeList;
        this.finishedInfo = data.flowViewer;
        this.taskForm.procInsId = data.procInsId;
        this.taskForm.deployId = data.deployId;
        this.taskForm.definitionId = data.definitionId;
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.button-new-tag {
  margin-left: 10px;
}
</style>

